<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="/js/rem.js" type="text/javascript"></script>
    <title>报名信息</title>
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <link rel="stylesheet" href="/css/sign-up.css" type="text/css">
    <link rel="stylesheet" href="/css/weui.min.css" type="text/css"/>
</head>
<body>
<div id="signup_main" class="active">
    <div class="content">
        <form method="post" action="" id="signupform">
            <input type="hidden" th:value="${reg_info.getACTIVITY_ID()}" name="activity_id">
            <input type="hidden" th:value="${reg_info.getUSER_ID()}" name="user_id">
            <div>
                <label>真实姓名</label>
                <input type="text" th:value="${reg_info.getUSER_NAME()}" name="user_name" placeholder="请输入真实姓名"/>
            </div>
            <div>
                <label>年龄</label>
                <input type="number" th:value="${reg_info.getAGE()}" name="age" placeholder="请输入您的年龄"/>
            </div>

            <div>
                <label>推荐单位</label>
                <input id="district_id" name="district_id" th:value="${reg_info.getDISTRICT_ID()}" type="hidden">

                <input id="district_name" name="district_name" th:value="${reg_info.getDISTRICT_NAME()}" readonly
                       type="text"
                       placeholder="请选择推荐单位！">
                <!--<input id="value1" type="hidden" value="20,234,504"/>-->
            </div>
            <div>
                <label>手机号码</label>
                <input name="telephone" id="tel" th:value="${reg_info.getTELEPHONE()}" type="tel" pattern=""
                       placeholder="请输入手机号"/>
            </div>
            <div class="verifycode">
                <label>验证码</label>
                <input name="message_code" type="text" placeholder="请输入验证码"/>
                <button type="button" id="btn_send_vercode" class="code">点击获取验证码</button>
            </div>
            <div class="sign_up">
                <button type="button" id="button_signup"><span ></span></button>
            </div>
        </form>
    </div>
</div>


<div style="display: none;" id="district_list">

    <span class="district_item" th:each="dis,disStat : ${district_info}">
        <span th:text="${dis.getID()}"></span>
        <span th:text="${dis.getDISTRICT_NAME()}"></span>
    </span>
</div>


<script type="text/javascript" src="/js/zepto.js"></script>
<script type="text/javascript" src="/js/touch.js"></script>
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    //序列化表单
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }
    $(function () {

        //TODO：地区选择
        var district_list = [];
        $("#district_list").children(".district_item").each(function (idx, item) {

            district_list.push({
                label: $(item).children("span:last-child").html(),
                value: $(item).children("span:first-child").html()
            })
        });

        $("#district_name").on("click", function (evt) {
            weui.picker(district_list,
                {
                    onChange: function (result) {
                    },
                    onConfirm: function (result) {
                        var ret = result[0];
                        $("#district_name").val(ret.label);
                        $("#district_id").val(ret.value);
                    },
                    title: '选择推荐单位'
                })
        })
        var sendT;
        var count = 60;
        var codesending = false;
        //发送验证码 touchstart touchmove touchend  click
        $("#btn_send_vercode").on("tap", function (res) {
            if (codesending || count < 60) return;

            if ($("#tel").val() == "" || !(/^1[3456789]\d{9}$/.test($("#tel").val()))) {
                alert("请输入有效的手机号！")
                return;
            }
            var that = this;
            codesending = true;
            $.ajax({
                url: "/front/getCode",
                method: "get",
                async: false,
                data: {
                    tel: $("#tel").val()
                },
                success: function (res) {
                    if (res == 1) {
                        //返回上一页
                        $(that).html("已发送（" + count + "）");
                        $(that).prop("disabled", true);
                        sendT = setInterval(function () {

                            $(that).html("已发送（" + (count--) + ")");
                            if (count <= 0) {
                                clearInterval(sendT);
                                $(that).prop("disabled", false);
                                count = 60;
                                $(that).html("点击获取验证码");
                            }
                        }, 1000)
                    } else {
                        alert("提交失败！")
                    }
                },
                error: function (res) {
                    alert("正在加载···")

                }, complete: function (res) {
                    codesending = false;
                }
            })
        })

        //验证验证码以及提交

        $("#button_signup").on("tap", function (e) {
            var data = $("#signupform").serializeObject();
            if (data.user_name == "") {
                alert("请填写真实姓名！")
                return;
            }
            if (data.age == "" || parseInt(data.age) <= 0 || parseInt(data.age) > 120) {
                alert("请填写一个有效的年龄！")
                return;
            }
            if (data.district_id == "") {
                alert('请选择所在地图书馆！')
                return;
            }
            if (data.company == "") {
                alert('请填写所属单位！')
                return;
            }
            if (data.telephone == "") {
                alert('请输入手机号！')
                return;
            }
            if ($("#tel").val() == "" || !(/^1[3456789]\d{9}$/.test($("#tel").val()))) {

                alert("请输入有效的手机号！")
                return;
            }
            if (data.message_code == "") {
                alert('请输入验证码！')
                return;
            }
            $("#button_signup>span").addClass("loading");

            $.ajax({
                url: "/front/updateUserRegInfo",
                method: "get",
                async: false,
                data: {
                    ACTIVITY_ID: data.activity_id,
                    USER_ID: data.user_id,
                    USER_NAME: data.user_name,
                    AGE: data.age,
                    DISTRICT_ID: data.district_id,
                    COMPANY: data.company,
                    TELEPHONE: data.telephone,
                    MESSAGE_CODE: data.message_code,
                    DISTRICT_NAME: data.district_name
                },
                dataType: "json",
                success: function (res) {

                    console.log(res)
                    if (res == -1) {

                        alert("验证码不正确！")

                    }
                    else {
                        alert("提交成功")
                        sessionStorage.setItem("need_refresh",true);
                        window.history.back();
                    }
                },
                error: function (res) {
                    alert("正在加载···")

                },
                complete:function () {
                    $("#button_signup>span").removeClass("loading");
                }
            })


            return false;
        })
    })

</script>
</body>
</html>